<!--
 * @Description: baseSet
 * @Version: 2.0
 * @Autor: zss
 * @Date: 2024-05-31 15:20:22
 * @LastEditors: @zhang-xiaofat 'zss872406501@163.com'
 * @LastEditTime: 2024-07-29 15:43:13
-->

<template>
  <div class="init-container">
    <Tabs type="card" value="name1" name="baseSet">
      <TabPane
        :label="$srv.getI18nByValue('全局基础设置')"
        name="name1"
        tab="baseSet"
        class="y-scroll"
      >
        <Tabs
          v-model="tabPaneActive"
          name="set"
          @on-click="tabChange"
          type="card"
        >
          <TabPane
            :label="$srv.getI18nByValue('基础设置')"
            name="set1"
            tab="set"
          >
            <Form
              ref="setform"
              :model="baseSetData.set1"
              :rules="ruleCustom"
              :label-width="180"
              class="formLayout"
              label-colon
            >
              <Row>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('默认语言')"
                    prop="DEF_LANG"
                  >
                    <div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['DEF_LANG']"
                      />
                      <Input
                        type="text"
                        v-model="formCustom['DEF_LANG']"
                        clearable
                      ></Input>
                    </div>
                  </FormItem>
                </Col>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('备份数据库保留天数')"
                    prop="BACKUP_DB_DAYS"
                  >
                    <div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['BACKUP_DB_DAYS']"
                      />
                      <Input
                        type="text"
                        v-model="formCustom['BACKUP_DB_DAYS']"
                        clearable
                      ></Input>
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('雪花工作ID')"
                    prop="SNOW_WORK_ID"
                  >
                    <div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['SNOW_WORK_ID']"
                      />
                      <Input
                        type="text"
                        v-model="formCustom['SNOW_WORK_ID']"
                        clearable
                      ></Input>
                    </div>
                  </FormItem>
                </Col>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('权限冲突')"
                    prop="PMS_CONFLICTS"
                    ><div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['PMS_CONFLICTS']"
                      />
                      <i-switch
                        v-model="formCustom['PMS_CONFLICTS']"
                        size="large"
                        true-value="1"
                        false-value="0"
                      >
                      </i-switch>
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('表日志保存天数')"
                    prop="TABLE_LOG_SAVE_DAYS"
                    ><div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['TABLE_LOG_SAVE_DAYS']"
                      />
                      <Input
                        type="text"
                        v-model="formCustom['TABLE_LOG_SAVE_DAYS']"
                        clearable
                      ></Input>
                    </div>
                  </FormItem>
                </Col>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('密码长度')"
                    prop="PWD_LEN"
                    ><div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['PWD_LEN']"
                      />
                      <Input
                        type="text"
                        v-model="formCustom['PWD_LEN']"
                        clearable
                      ></Input>
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('密码复杂性')"
                    prop="PWD_COMPLEXITY"
                    ><div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['PWD_COMPLEXITY']"
                      />

                      <i-switch
                        v-model="formCustom['PWD_COMPLEXITY']"
                        size="large"
                        true-value="1"
                        false-value="0"
                      >
                      </i-switch>
                    </div>
                  </FormItem>
                </Col>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('密码过期时间')"
                    prop="PWD_EXPIRATION_TIME"
                    ><div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['PWD_EXPIRATION_TIME']"
                      />
                      <Input
                        type="text"
                        v-model="formCustom['PWD_EXPIRATION_TIME']"
                        clearable
                      ></Input>
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('密码历史')"
                    prop="PWD_HISTORY"
                    ><div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['PWD_HISTORY']"
                      />
                      <Input
                        type="text"
                        v-model="formCustom['PWD_HISTORY']"
                        clearable
                      ></Input>
                    </div>
                  </FormItem>
                </Col>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('密码锁定策略')"
                    prop="PWD_LOCKOUT_POLICY"
                    ><div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['PWD_LOCKOUT_POLICY']"
                      />
                      <Input
                        type="text"
                        v-model="formCustom['PWD_LOCKOUT_POLICY']"
                        clearable
                      ></Input>
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="8" offset="2">
                  <FormItem
                    :label="$srv.getI18nByValue('自动删除关联功能')"
                    prop="AUTO_DEL_ASSOC_FUNS"
                    ><div class="item-group">
                      <Icon
                        size="16"
                        type="ios-help-circle"
                        :title="formHint['AUTO_DEL_ASSOC_FUNS']"
                      />

                      <i-switch
                        v-model="formCustom['AUTO_DEL_ASSOC_FUNS']"
                        size="large"
                        true-value="1"
                        false-value="0"
                      >
                      </i-switch>
                    </div>
                  </FormItem>
                </Col>
              </Row>
              <Divider size="small" />
              <Row>
                <Col span="24">
                  <FormItem>
                    <Button type="primary" @click="formSubmit">{{
                      $srv.getI18nByValue('提交')
                    }}</Button>
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </TabPane>
          <TabPane
            :label="$srv.getI18nByValue('系统表默认字段')"
            name="SYS_TABLE_DEF_FIELD"
            tab="set"
            class="y-scroll"
          >
            <div class="submit">
              <Input
                search
                placeholder="搜索内容"
                @on-search="searchByTable"
                class="searchInput"
              />
              <Button @click="panelSubmit('SYS_TABLE_DEF_FIELD')">{{
                $srv.getI18nByValue('提交')
              }}</Button>
            </div>
            <o-simple-table
              :allowEdit="true"
              :disabled="false"
              :columns="columns0"
              :data="baseSetData['SYS_TABLE_DEF_FIELD']"
              :compBoxInfo="GT_compBoxInfo"
              @onSaveRow="onSaveRow($event, 'SYS_TABLE_DEF_FIELD')"
            />
          </TabPane>
          <TabPane
            :label="$srv.getI18nByValue('系统视图')"
            name="SYS_VIEW"
            tab="set"
            class="y-scroll"
          >
            <div class="submit">
              <Input
                search
                placeholder="搜索内容"
                @on-search="searchByTable"
                class="searchInput"
              />
              <Button @click="panelSubmit('SYS_VIEW', true)">{{
                $srv.getI18nByValue('提交')
              }}</Button>
            </div>
            <o-simple-table
              :allowEdit="true"
              :disabled="false"
              :data="baseSetData['SYS_VIEW']"
              :columns="columns2"
              :compBoxInfo="GT_compBoxInfo"
              @onSaveRow="onSaveRow($event, 'SYS_VIEW')"
            />
          </TabPane>
          <TabPane
            :label="$srv.getI18nByValue('系统表')"
            name="SYS_TABLE"
            tab="set"
            class="y-scroll"
          >
            <div class="submit">
              <Input
                search
                placeholder="搜索内容"
                @on-search="searchByTable"
                class="searchInput"
              />
              <Button @click="panelSubmit('SYS_TABLE', true)">{{
                $srv.getI18nByValue('提交')
              }}</Button>
            </div>
            <o-simple-table
              :allowEdit="true"
              :disabled="false"
              :data="baseSetData['SYS_TABLE']"
              :columns="columns2"
              :compBoxInfo="GT_compBoxInfo"
              @onSaveRow="onSaveRow($event, 'SYS_TABLE')"
            />
          </TabPane>
          <TabPane
            :label="$srv.getI18nByValue('功能缓存注册')"
            name="CUST_CACHE_FUNS"
            tab="set"
            class="y-scroll"
          >
            <div class="submit">
              <Input
                search
                placeholder="搜索内容"
                @on-search="searchByTable"
                class="searchInput"
              />
              <Button @click="panelSubmit('CUST_CACHE_FUNS', true)">{{
                $srv.getI18nByValue('提交')
              }}</Button>
            </div>
            <o-simple-table
              :allowEdit="true"
              :disabled="false"
              :data="baseSetData['CUST_CACHE_FUNS']"
              :columns="custCacheColumns"
              :compBoxInfo="GT_compBoxInfo"
              @onSaveRow="onSaveRow($event, 'CUST_CACHE_FUNS')"
            />
          </TabPane>
          <TabPane
            :label="$srv.getI18nByValue('备份数据库信息')"
            name="SYS_BACKUP_DB_INFO"
            tab="set"
            class="y-scroll"
          >
            <div class="submit">
              <Input
                search
                placeholder="搜索内容"
                @on-search="searchByTable"
                class="searchInput"
              />
              <Button @click="panelSubmit('SYS_BACKUP_DB_INFO')">{{
                $srv.getI18nByValue('提交')
              }}</Button>
            </div>
            <o-simple-table
              :allowEdit="true"
              :disabled="false"
              :data="baseSetData['SYS_BACKUP_DB_INFO']"
              :columns="columns1"
              :compBoxInfo="GT_compBoxInfo"
              @onSaveRow="onSaveRow($event, 'SYS_BACKUP_DB_INFO')"
            />
          </TabPane>
          <TabPane
            :label="$srv.getI18nByValue('默认样式模板')"
            name="SYS_STYLE_TEMPLATE"
            tab="set"
          >
            <!-- <Table
              :columns="styleTemplateColumns"
              :data="styleTemplateData"
              stripe
            >
              <template #userID="{ row, index }">
                <o-m2o-selector
                  v-if="row.templateName === '用户默认模板'"
                  :disabled="false"
                  v-model="baseSetData['SYS_STYLE_TEMPLATE'].userTemplate[0]['userId']"
                  :placeholder="$srv.getI18nByPath('vxe.m2o.toTable')"
                  @on-dochange="onTableSelected(row, index)"
                  tTable="_sys_user"
                  tField="user_name"
                ></o-m2o-selector>
              </template>
            </Table> -->
            <div class="base-grid-container">
              <component
                :is="openCompName"
                v-bind="{
                  config: bgConfig,
                  regCustEventName: regCustEventName
                }"
              >
              </component>
            </div>
          </TabPane>
        </Tabs>
      </TabPane>
      <!-- <TabPane
        :label="$srv.getI18nByValue('其它设置')"
        name="name2"
        tab="baseSet"
      >
      </TabPane> -->
    </Tabs>
  </div>
</template>

<script lang="ts">
import { isArray } from 'xe-utils';
import {
  I_cmd,
  N_oBaseGrid,
  T_cmd,
  T_srv,
  TabPaneName,
  Tsrv,
  columns0,
  columns1,
  columns2,
  custCacheColumns,
  ifs,
  styleTemplateColumns,
  styleTemplateData,
  vue
} from './config';

@T_srv.comp
export default class baseSet extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.ref('setform') readonly formRef!: any;

  /* 组件名 */
  private name: string = 'baseSet';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  private baseSetData: { [key: string]: any } = {};

  private formCustom: { [key: string]: any } = {};

  private formHint: { [key: string]: any } = {};

  private columns0 = columns0();

  private columns1 = columns1();

  private columns2 = columns2();

  private custCacheColumns = custCacheColumns();

  // 显示tab页
  private tabPaneActive: TabPaneName = 'set1';

  // 当前tab页
  private currentTabPane: TabPaneName = 'set1';

  // 数据是否发生变化
  private isEdit: boolean = false;

  // form校验
  private ruleCustom: any = {
    DEF_LANG: [
      { required: true, validator: this.validateString, trigger: 'blur' }
    ],
    BACKUP_DB_DAYS: [
      { required: true, validator: this.validateInt, trigger: 'blur' }
    ],
    SNOW_WORK_ID: [
      {
        required: true,
        validator: this.validateInt,
        trigger: 'blur'
      }
    ],
    TABLE_LOG_SAVE_DAYS: [
      {
        required: true,
        validator: this.validateInt,
        trigger: 'blur'
      }
    ]
  };

  private styleTemplateData = styleTemplateData();

  private styleTemplateColumns = styleTemplateColumns();

  public openCompName: string = '';

  public bgConfig: any = {};

  public regCustEventName: Array<N_oBaseGrid.I_regCustEventName | string> = [];

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
    this.$languageSetter.setLanguage(Tsrv.globalVar.i18n.zhCN);
    this.init();
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  private init() {
    this.GT_command.loadData();

    // 获取用户偏好模板的配置
    this.getBgConfig().then(res => {
      if (res.isErr()) {
        throw new Error(res.errmsg);
      } else {
        const cf = res.getReturnData(Tsrv.globalVar.funName.SYS_DEF_TEMP_SET);
        this.setCustDefListener(cf);
        this.bgConfig = cf;

        this.openCompName = Tsrv.globalVar.compName.BASE_GRID;
      }
    });
  }

  private getBgConfig(): Promise<ifs.I_return<any>> {
    return Tsrv.getFunConf(Tsrv.globalVar.funName.SYS_DEF_TEMP_SET);
  }

  private setCustDefListener(cf) {
    const defListener = {
      receive: {
        source: cf.name,
        target: Tsrv.utils.custUUID(6) // 使接收事件无效
      }
    };
    const custDefListener = cf?.messageConfig?.custDefListener;
    if (!Tsrv.utils.noValue(custDefListener)) {
      let isNull = true;
      Object.keys(custDefListener).forEach(key => {
        if (!Tsrv.utils.noValue(custDefListener[key])) {
          isNull = false;
          if (Array.isArray(custDefListener[key])) {
            custDefListener[key].forEach(ele => {
              this.regCustEventName.push({
                receive: {
                  source: ele,
                  target: Tsrv.utils.custUUID(6) // 使接收事件无效
                }
              });
            });
          } else if (typeof custDefListener[key] === 'string') {
            this.regCustEventName.push(custDefListener[key]);
          } else {
            throw new Error(`无法识别的事件监听[${custDefListener[key]}]`);
          }
        }
      });
      if (isNull) {
        this.regCustEventName.push(defListener);
      }
    } else {
      // 拦截接收事件
      this.regCustEventName.push(defListener);
    }

    if (!Tsrv.utils.noValue(cf?.messageConfig)) {
      const emitActions = cf.messageConfig?.emitActions;
      // 发送事件拦截
      if (!Tsrv.utils.noValue(emitActions)) {
        emitActions.search.forEach(ele => {
          // 拦截发送事件
          this.regCustEventName.push({
            send: {
              source: ele.toID,
              target: Tsrv.utils.custUUID(6) // 使发送事件无效
            }
          });
        });
      }
    }
  }

  // 表格数据提交，数组需要将{field1：xxx, field2: xxx,...}转换为[xxx, xxx]
  private panelSubmit(name: TabPaneName, isArr: boolean = false) {
    // 判断是否修改，返回修改数据
    const updateData = this.isEditData(name, isArr, true);
    if (this.isEdit) {
      this.currentTabPane = name;
      this.GT_command.handleSave(updateData);
      this.isEdit = false;
    }
  }

  // 字符串类型输入框校验
  private validateString(rule, value, callback) {
    if (Tsrv.utils.noValue(value)) {
      callback(new Error(Tsrv.getI18nByValue('内容不能为空')));
    } else {
      if (rule?.field === 'DEF_LANG') {
        Tsrv.exists(
          Tsrv.globalVar.dbType.MYSQL,
          Tsrv.globalVar.funName.SYS_KEY_WORD,
          { $and: [{ class_code: { $eq: 'i18N' } }, { title: { $eq: value } }] }
        ).then(([ok, err]) => {
          if (!ok) {
            callback(new Error(Tsrv.getI18nByValue('值不合法')));
          } else {
            callback();
          }
        });
      }
      callback();
    }
  }

  // int输入框校验
  private validateInt(rule, value, callback) {
    if (!value) {
      callback(new Error(Tsrv.getI18nByValue('内容不能为空')));
    } else if (!Number.isInteger(Number(value))) {
      callback(new Error(Tsrv.getI18nByValue('请输入整数')));
    } else {
      callback();
    }
  }

  private cloneBaseSetData() {
    const obj: Array<Object> | Object = this.baseSetData[this.currentTabPane];
    for (const key in obj) {
      if (!isArray(obj[key])) {
        obj[key] = this.GT_command.oldDaseSetData[this.currentTabPane][key];
      } else {
        obj[key].forEach((item, number) => {
          for (const i in item) {
            item[i] = this.GT_command.oldDaseSetData[this.currentTabPane][key][
              number
            ][i];
          }
        });
      }
    }
  }

  // tab签切换前校验
  private async tabChange(name: TabPaneName) {
    await this.isEditData(name);
    if (this.isEdit) {
      this.$Modal.confirm({
        title: '有修改内容还未提交',
        onOk: () => {
          this.cloneBaseSetData();
          this.currentTabPane = name;
          this.tabPaneActive = this.currentTabPane;
        },
        onCancel: () => {
          this.tabPaneActive = this.currentTabPane;
        }
      });
    } else {
      this.currentTabPane = name;
      this.tabPaneActive = this.currentTabPane;
    }
  }

  private isEditData(
    name: TabPaneName,
    isArr: boolean = false,
    isSubmit: boolean = false
  ): Array<{ field: string; value: any }> {
    const updateData: Array<{ field: string; value: any }> = [];
    const data = Tsrv.utils.clone(this.baseSetData, true);
    for (const key in data) {
      if (key === 'set1' || key === 'SYS_STYLE_TEMPLATE') {
        continue;
      }
      data[key].forEach(el => {
        if (
          !Tsrv.utils.noValue(el['_index']) ||
          !Tsrv.utils.noValue(el['_rowKey'])
        ) {
          delete el['_index'];
          delete el['_rowKey'];
        }
        if (el?.cellClassName) {
          delete el['cellClassName'];
        }
      });
    }
    const dataMd5 = Tsrv.utils.md5(JSON.stringify(data));
    if (this.GT_command.baseSetDataMd5 !== dataMd5) {
      this.isEdit = true;
      if (isSubmit) {
        // 如果修改了,返回修改的数据
        if (isArr) {
          let tableData = data[name];
          tableData = tableData.reduce((prev, item) => {
            for (const key in item) {
              if (!Tsrv.utils.noValue(item[key])) {
                prev.push(item[key]);
              }
            }
            return prev;
          }, []);
          updateData.push({ field: name, value: tableData });
        } else {
          updateData.push({ field: name, value: data[name] });
        }
      }
    } else {
      this.isEdit = false;
    }
    return updateData;
  }

  // 行修改确认事件
  private onSaveRow(e, str) {}

  // 表单提交
  private formSubmit() {
    this.formRef.validate(valid => {
      const differences = this.GT_command.findDifferences(
        this.GT_command.oldDaseSetData['set1'],
        this.formCustom
      );
      if (valid && !Tsrv.utils.noValue(differences)) {
        this.GT_command.handleSave(differences);
        this.isEdit = false;
      }
    });
  }

  // 表格搜索
  public searchByTable(val: string) {
    if (Tsrv.utils.noValue(val)) {
      this.baseSetData[this.tabPaneActive].forEach(el => {
        if (!Tsrv.utils.noValue(el?.cellClassName)) {
          this.$set(el, 'cellClassName', {});
        }
      });
    } else {
      this.baseSetData[this.tabPaneActive].forEach((el, index) => {
        if (!Tsrv.utils.noValue(el?.cellClassName)) {
          el.cellClassName = {};
        }
        for (const key in el) {
          if (typeof el[key] !== 'string') {
            if (
              String(el[key])
                .toLowerCase()
                .includes(val.toLowerCase())
            ) {
              // 查找到相应数据之后缓存，break防止重复缓存
              // prev.push(el);
              const obj = {};
              obj[key] = 'table-info-cell-name';
              this.$set(el, 'cellClassName', obj);
              break;
            }
          } else {
            if (el[key].toLowerCase().includes(val.toLowerCase())) {
              // 查找到相应数据之后缓存，break防止重复缓存
              // prev.push(el);
              const obj = {};
              obj[key] = 'table-info-cell-name';
              this.$set(el, 'cellClassName', obj);
              break;
            }
          }
        }
      });
    }
  }

  private onTableSelected(val: any, idx: number) {}
}
</script>
<style lang="scss" scoped>
.init-container {
  width: auto;
  .submit {
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #f5e6e6;
    // z-index: 103;
    display: flex;
    justify-content: flex-end;
    padding: 3px;
    .searchInput {
      width: 30%;
      margin-right: 10px;
    }
  }
  .item-group {
    display: flex;
    align-items: center;
  }
  .base-grid-container {
    width: 100%;
    height: 100%;
  }
}
.container {
  width: 100%;
  .collapse {
    max-height: calc(100vh - 80px);
  }
}
.no-padding {
  height: 100%;
  width: 100%;
  padding: 0;
  background-color: #fff;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
}
.formLayout {
  background: #fff;
  border-radius: 5px;
  height: 100%;
  padding-top: 30px;
}
::v-deep .ivu-table .table-info-cell-name {
  background-color: #2db7f5 !important;
  color: #fff !important;
}
::v-deep .ivu-form-item-label {
  padding: 10px 0 10px 30px;
  text-align: left;
}
::v-deep .ivu-collapse-header {
  background: rgb(240, 249, 255);
  margin-bottom: 15px;
}
</style>
